<template>
  <div class="navbar">
    <div class="title" :style="{ display: 'block' }">
      <el-image
        v-if="false"
        class="title-img"
        :style="{
          width: '44px',
          objectFit: 'cover',
          borderRadius: '100%',
          float: 'left',
          height: '44px',
        }"
        src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg"
        fit="cover"
      />
      <span class="title-name">{{ this.$project.projectName }} </span>
    </div>
    <div class="right">
      <div class="nickname">
        {{ this.$storage.get('role') }} {{ this.$storage.get('adminName') }}
      </div>
      <div
        :style="{
          cursor: 'pointer',
          margin: '0 15px',
          lineHeight: '44px',
          color: '#666',
        }"
        class="logout"
        @click="onLogout"
      >
        退出登录
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      user: {},
    }
  },
  created() {},
  mounted() {
    let sessionTable = this.$storage.get('sessionTable')
    this.$http({
      url: sessionTable + '/session',
      method: 'get',
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.user = data.data
        this.$storage.set('userid', data.data.id)
      } else {
        let message = this.$message
        message.error(data.msg)
      }
    })
  },
  methods: {
    onLogout() {
      let storage = this.$storage
      let router = this.$router
      storage.clear()
      router.replace({
        name: 'login',
      })
    },
    onIndexTap() {
      window.location.href = `${this.$base.indexUrl}`
    },
  },
}
</script>

<style lang="scss" scoped>
.navbar {
  border: 5px solid rgb(255, 0, 0);
  background: linear-gradient(
        180deg,
        #5286f7 0%,
        #799ff1 10%,
        rgba(152, 196, 238, 0.85) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(152, 196, 238, 0.85) 70%,
        #7da5fc 90%,
        #5286f7 100%
      );
    .title .title-name {
    border: 1px solid rosybrown;
    padding: 0 0 0 12px;
    line-height: 44px;
    font-size: 24px;
    color: #000;
    float: left;
  }

  .right {
    position: absolute;
    right: 20px;
    top: 8px;
    display: flex;

    .nickname {
      cursor: pointer;
      margin: 0 15px;
      line-height: 44px;
      color: #333;
    }
  }
}
</style>
